<template>
  <!-- 分页 -->
  <div class="demo-pagination-block">
    <el-pagination
      v-model:current-page="currentPage2"
      v-model:page-size="pageSize2"
      :page-sizes="props.page_limit"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next"
      :total="props.total_rows"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script lang="ts" setup>

import {ref} from 'vue'

const emit = defineEmits(['some-event'])
const props = defineProps(['queryParam', "page_limit", "total_rows"])


const currentPage2 = ref(1)
const pageSize2 = ref(props.page_limit[0])
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  pageSize2.value = val
  props.queryParam.start = 0
  props.queryParam.limit = val
  emit("some-event", props.queryParam)
}

const handleCurrentChange = (val: number) => {
  props.queryParam.start = pageSize2.value * (currentPage2.value-1)
  props.queryParam.limit = pageSize2.value
  emit("some-event", props.queryParam)
}

</script>

<style>
.demo-pagination-block{
  margin-top: 10px;
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}

</style>
